<template>
	<view class="content">
		<view class="card" v-for="(item,index) in data" :key="index" v-if="!isshow">
			<view class="card1">
				<view class="top">
					<view class="text">
						{{item.cardType}}
					</view>
					<image src="../../../static/images/vip1.png" mode="aspectFill"></image>
				</view>
				<view class="middle">
					{{item.cardName}}<text>/{{item.consumptionSchoolHour}}节</text>
				</view>
				<view class="bottom justify-between">
					<view class="text">
						{{item.shopName}}
					</view>
					<view class="text" v-if="item.consumptionType==1">
						已过期
					</view>
					<view class="text" v-if="item.consumptionType==0">
						已使用
					</view>
				</view>
			</view>
		</view>
		<view class="no-content" v-if="isshow">
			<image src="../../../static/images/no_order.png" mode="" class="no-img"></image>
			<view class="no-text">暂无内容</view>
		</view>
	</view>
</template>

<script>
	import tuiModal from "@/components/modal/modal"//弹窗
	import {findUserCard} from '@/api/index.js';
	export default {
		components: {
			tuiModal,
			isshow: true
		},
		data() {
			return {
				modalName: null,
				data:[],
				isshow: true
			};
		},
		onLoad() {
			this.MemberCard()
		},
		methods: {
			MemberCard() {
				let _this = this
				let id = uni.getStorageSync('shopID')
				console.log(id)
				let data = {
					queryVipType:'CONSUMED',
					shopId: id
				}
				findUserCard(data).then(res=>{
					console.log(res)
					if(res.length===0){
						this.isshow = true
					}else {
						this.data = res
						this.isshow = false
					}
					
				})
			},
			// 弹窗
			showModal(e) {
				console.log(e);
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			toResult(){
				uni.redirectTo({
				    url: 'submit_review'
				});
			}
		}
	}
</script>

<style lang='scss'>
	page{
		background: #FFFFFF;
	}
	.card{
		margin:0 30rpx;
		padding-top:30rpx;
	}
	.card1{
		-webkit-transform:scale(1)!important;
		transform:scale(1)!important;
		left:-60rpx!important;
		padding:0;
		width:100%;
		height: 380rpx;
		padding:0;
		background: url(../../../static/images/vip2.png);
		background-size: cover;
		margin-right: 28rpx;
		border-radius: 26rpx;
	}
	.top image{
		width:82rpx;
		height:40rpx;
		margin:32rpx;
	}
	.top{
		color: #B59C78;
		font-size: 28rpx;
		display: flex;
		flex-direction: row;
	}
	.top .text{
		flex: 1;
		padding:32rpx 46rpx 32rpx 46rpx;
	}
	.middle{
		margin-left: 42rpx;
		font-size: 60rpx;
		color: #B59C78;
	}
	.middle text{
		font-size: 40rpx;
	}
	.bottom{
		display: flex;
		flex-direction: row;
		margin:50rpx;
	}
	.bottom .text{
		color: #776852;
		font-size: 28rpx;
		margin:88rpx 0 50rpx 0rpx;
		justify-content: space-between;
	}
	.bottom .buy{
		color: #E1CEAD;
		font-size: 28rpx;
		margin:66rpx 32rpx 36rpx 0rpx;
		background: #0B0404;
		width:176rpx;
		height:76rpx;
		border-radius: 400rpx;
		text-align: center;
		line-height: 76rpx;
	}
	.details{
		display: flex;
		flex-direction: row;
		height: 100rpx;
		background: #fff;
		padding:0 36rpx;
		line-height: 100rpx;
	}
	.details .text{
		flex: 1;
	}
	.title-con{
		margin:50rpx 30rpx 0;
	}
	.title-con .title{
		font-size: 30rpx;
		color: #101010;
		margin-bottom: 4rpx;
	}
	.title-con .text{
		color: #999999;
		font-size: 24rpx;
		margin-top:12rpx;
	}
	.footer{
		padding:240rpx 74rpx;
	}
	.footer1{
		padding: 107rpx 74rpx 0;
	}
	.footer button{
		background: #AE874B;
		color:#fff;
		height: 80rpx;
		width: 600rpx;
		border-radius: 40rpx;
		font-size: 28rpx;
		line-height: 80rpx;
	}
	.cu-dialog{
		width:100%;
		border-radius: 0;
		height:560rpx;
		background: #fff;
		vertical-align: bottom;
	}
	.cu-bar{
		display: flex;
		flex-direction: column;
	}
	.cu-bar .top-title{
		display: flex;
		flex-direction: row;
		width:100%;
	}
	.cu-bar .top-title .title{
		flex: 1;
		color: #BFBFBF;
		margin-right:-94rpx;
		margin-top:36rpx;
	}
	.cuIcon-close{
		background: #BFBFBF;
		width: 40rpx;
		height: 40rpx;
		border-radius: 40rpx;
		color: #fff;
		line-height: 40rpx;
		text-align: center;
		margin:34rpx;
	}
	.list{
		height:82rpx;
		display: flex;
		flex-direction: row;
		text-align: left;
		border-bottom: 1px solid #F0EDED;
		line-height: 82rpx;
		padding:0 24rpx;
	}
	.list-item{
		flex: 1;
	}
	.money{
		color: #F00617;
	}
	.no-content {
		text-align: center;
		.no-img {
			width: 300rpx;
			height: 300rpx;
		}
	}
</style>
